<script setup>
import { onMounted, ref } from 'vue';
import anlyze from '../../apis/anlyze.js';
import * as echarts from 'echarts'; // 引入 echarts 库

const chart = ref(null);

// 先定义一个空的 option，后续动态更新
const option = ref({
  title: {
    text: '活跃人数分布',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center',
  },
  series: [
    {
      name: '活跃人数',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [], // 初始数据为空
    },
  ],
});

// 获取后端数据并更新图表
const fetchData = async () => {
  try {
    const res = await anlyze.activeMaps(); // 假设这是你的 API 请求函数
    // 格式化数据为 ECharts 需要的格式
    const chartData = res.map((item) => ({
      value: item.count,
      name: item.category,
    }));

    // 更新 ECharts 配置
    option.value.series[0].data = chartData;
    // 通过 ref 更新 ECharts 图表
    const myChart = echarts.init(chart.value);
    myChart.setOption(option.value);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 在组件挂载后获取数据并初始化图表
onMounted(() => {
  fetchData();
});
</script>

<template>
  <div ref="chart" style="width: 600px; height: 400px"></div>
</template>
